<template>
  <!--Con2-->
  <div
    :class="[
      { Con2: this.H1 < 18 && this.H1 > 7 },
      { Con: !(this.H1 < 18 && this.H1 > 7) },
    ]"
    translate="no"
    v-cloak
  >
    <div class="night">
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div class="shooting_star"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
      <div :class="{ shooting_star: !(this.H1 < 18 && this.H1 > 7) }"></div>
    </div>
    <!--流星特效 night-->

    <div
      :class="[
        { 'Con2-H': this.H1 < 18 && this.H1 > 7 },
        { 'Con-H': !(this.H1 < 18 && this.H1 > 7) },
      ]"
    >
      <!--时间部分 Con2-H-->
      <p class="P1">{{ nowDate }}&nbsp;&nbsp;&nbsp;{{ nowWeek }}</p>
      <p class="P2">{{ nowTime }}</p>
      <p class="P3">广州城市理工学院计算机实验中心</p>
      <span
        :class="[
          { ChangeBut: this.H1 < 18 && this.H1 > 7 },
          { ChangeBut2: !(this.H1 < 18 && this.H1 > 7) },
        ]"
        @click="changeBut()"
        >&lt;&lt;切换模式</span
      >
    </div>

    <div
      :class="[
        { 'Con2-C': this.H1 < 18 && this.H1 > 7 },
        { 'Con-C': !(this.H1 < 18 && this.H1 > 7) },
      ]"
    >
      <!--课程表格 Con2-C-->
      <table cellspacing="4px">
        <tr
          :class="[
            { table2_header: this.H1 < 18 && this.H1 > 7 },
            { table_header: !(this.H1 < 18 && this.H1 > 7) },
          ]"
        >
          <!--table2_header-->
          <td>课室</td>
          <td>一，二节</td>
          <td>三，四节</td>
          <td>五，六节</td>
          <td>七，八节</td>
          <td>九，十节</td>
          <td>十一，十二节</td>
        </tr>
        <!--表头-->

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-102
          </td>
          <!--id="RoomID2"-->
          <td :class="[{ tdStyle: B102C1 != '' }, { tdStyleN: B102C1 == '' }]">
            {{ B102C1.c_name }}<br />
            {{ B102C1.c_grade }}{{ B102C1.c_classroom }}<br />
            {{ B102C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B102C2 != '' }, { tdStyleN: B102C2 == '' }]">
            {{ B102C2.c_name }}<br />
            {{ B102C2.c_grade }}{{ B102C2.c_classroom }}<br />
            {{ B102C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B102C3 != '' }, { tdStyleN: B102C3 == '' }]">
            {{ B102C3.c_name }}<br />
            {{ B102C3.c_grade }}{{ B102C3.c_classroom }}<br />
            {{ B102C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B102C4 != '' }, { tdStyleN: B102C4 == '' }]">
            {{ B102C4.c_name }}<br />
            {{ B102C4.c_grade }}{{ B102C4.c_classroom }}<br />
            {{ B102C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B102C5 != '' }, { tdStyleN: B102C5 == '' }]">
            {{ B102C5.c_name }}<br />
            {{ B102C5.c_grade }}{{ B102C5.c_classroom }}<br />
            {{ B102C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B102C6 != '' }, { tdStyleN: B102C6 == '' }]">
            {{ B102C6.c_name }}<br />
            {{ B102C6.c_grade }}{{ B102C6.c_classroom }}<br />
            {{ B102C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-203
          </td>
          <td :class="[{ tdStyle: B203C1 != '' }, { tdStyleN: B203C1 == '' }]">
            {{ B203C1.c_name }}<br />
            {{ B203C1.c_grade }}{{ B203C1.c_classroom }}<br />
            {{ B203C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B203C2 != '' }, { tdStyleN: B203C2 == '' }]">
            {{ B203C2.c_name }}<br />
            {{ B203C2.c_grade }}{{ B203C2.c_classroom }}<br />
            {{ B203C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B203C3 != '' }, { tdStyleN: B203C3 == '' }]">
            {{ B203C3.c_name }}<br />
            {{ B203C3.c_grade }}{{ B203C3.c_classroom }}<br />
            {{ B203C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B203C4 != '' }, { tdStyleN: B203C4 == '' }]">
            {{ B203C4.c_name }}<br />
            {{ B203C4.c_grade }}{{ B203C4.c_classroom }}<br />
            {{ B203C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B203C5 != '' }, { tdStyleN: B203C5 == '' }]">
            {{ B203C5.c_name }}<br />
            {{ B203C5.c_grade }}{{ B203C5.c_classroom }}<br />
            {{ B203C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B203C6 != '' }, { tdStyleN: B203C6 == '' }]">
            {{ B203C6.c_name }}<br />
            {{ B203C6.c_grade }}{{ B203C6.c_classroom }}<br />
            {{ B203C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-301
          </td>
          <td :class="[{ tdStyle: B301C1 != '' }, { tdStyleN: B301C1 == '' }]">
            {{ B301C1.c_name }}<br />
            {{ B301C1.c_grade }}{{ B301C1.c_classroom }}<br />
            {{ B301C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B301C2 != '' }, { tdStyleN: B301C2 == '' }]">
            {{ B301C2.c_name }}<br />
            {{ B301C2.c_grade }}{{ B301C2.c_classroom }}<br />
            {{ B301C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B301C3 != '' }, { tdStyleN: B301C3 == '' }]">
            {{ B301C3.c_name }}<br />
            {{ B301C3.c_grade }}{{ B301C3.c_classroom }}<br />
            {{ B301C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B301C4 != '' }, { tdStyleN: B301C4 == '' }]">
            {{ B301C4.c_name }}<br />
            {{ B301C4.c_grade }}{{ B301C4.c_classroom }}<br />
            {{ B301C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B301C5 != '' }, { tdStyleN: B301C5 == '' }]">
            {{ B301C5.c_name }}<br />
            {{ B301C5.c_grade }}{{ B301C5.c_classroom }}<br />
            {{ B301C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B301C6 != '' }, { tdStyleN: B301C6 == '' }]">
            {{ B301C6.c_name }}<br />
            {{ B301C6.c_grade }}{{ B301C6.c_classroom }}<br />
            {{ B301C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-304
          </td>
          <td :class="[{ tdStyle: B304C1 != '' }, { tdStyleN: B304C1 == '' }]">
            {{ B304C1.c_name }}<br />
            {{ B304C1.c_grade }}{{ B304C1.c_classroom }}<br />
            {{ B304C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B304C2 != '' }, { tdStyleN: B304C2 == '' }]">
            {{ B304C2.c_name }}<br />
            {{ B304C2.c_grade }}{{ B304C2.c_classroom }}<br />
            {{ B304C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B304C3 != '' }, { tdStyleN: B304C3 == '' }]">
            {{ B304C3.c_name }}<br />
            {{ B304C3.c_grade }}{{ B304C3.c_classroom }}<br />
            {{ B304C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B304C4 != '' }, { tdStyleN: B304C4 == '' }]">
            {{ B304C4.c_name }}<br />
            {{ B304C4.c_grade }}{{ B304C4.c_classroom }}<br />
            {{ B304C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B304C5 != '' }, { tdStyleN: B304C5 == '' }]">
            {{ B304C5.c_name }}<br />
            {{ B304C5.c_grade }}{{ B304C5.c_classroom }}<br />
            {{ B304C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B304C6 != '' }, { tdStyleN: B304C6 == '' }]">
            {{ B304C6.c_name }}<br />
            {{ B304C6.c_grade }}{{ B304C6.c_classroom }}<br />
            {{ B304C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-401
          </td>
          <td :class="[{ tdStyle: B401C1 != '' }, { tdStyleN: B401C1 == '' }]">
            {{ B401C1.c_name }}<br />
            {{ B401C1.c_grade }}{{ B401C1.c_classroom }}<br />
            {{ B401C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B401C2 != '' }, { tdStyleN: B401C2 == '' }]">
            {{ B401C2.c_name }}<br />
            {{ B401C2.c_grade }}{{ B401C2.c_classroom }}<br />
            {{ B401C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B401C3 != '' }, { tdStyleN: B401C3 == '' }]">
            {{ B401C3.c_name }}<br />
            {{ B401C3.c_grade }}{{ B401C3.c_classroom }}<br />
            {{ B401C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B401C4 != '' }, { tdStyleN: B401C4 == '' }]">
            {{ B401C4.c_name }}<br />
            {{ B401C4.c_grade }}{{ B401C4.c_classroom }}<br />
            {{ B401C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B401C5 != '' }, { tdStyleN: B401C5 == '' }]">
            {{ B401C5.c_name }}<br />
            {{ B401C5.c_grade }}{{ B401C5.c_classroom }}<br />
            {{ B401C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B401C6 != '' }, { tdStyleN: B401C6 == '' }]">
            {{ B401C6.c_name }}<br />
            {{ B401C6.c_grade }}{{ B401C6.c_classroom }}<br />
            {{ B401C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-403
          </td>
          <td :class="[{ tdStyle: B401C1 != '' }, { tdStyleN: B401C1 == '' }]">
            {{ B403C1.c_name }}<br />
            {{ B403C1.c_grade }}{{ B403C1.c_classroom }}<br />
            {{ B403C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B403C2 != '' }, { tdStyleN: B403C2 == '' }]">
            {{ B403C2.c_name }}<br />
            {{ B403C2.c_grade }}{{ B403C2.c_classroom }}<br />
            {{ B403C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B403C3 != '' }, { tdStyleN: B403C3 == '' }]">
            {{ B403C3.c_name }}<br />
            {{ B403C3.c_grade }}{{ B403C3.c_classroom }}<br />
            {{ B403C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B403C4 != '' }, { tdStyleN: B403C4 == '' }]">
            {{ B403C4.c_name }}<br />
            {{ B403C4.c_grade }}{{ B403C4.c_classroom }}<br />
            {{ B403C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B403C5 != '' }, { tdStyleN: B403C5 == '' }]">
            {{ B403C5.c_name }}<br />
            {{ B403C5.c_grade }}{{ B403C5.c_classroom }}<br />
            {{ B403C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B403C6 != '' }, { tdStyleN: B403C6 == '' }]">
            {{ B403C6.c_name }}<br />
            {{ B403C6.c_grade }}{{ B403C6.c_classroom }}<br />
            {{ B403C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-404
          </td>
          <td :class="[{ tdStyle: B404C1 != '' }, { tdStyleN: B404C1 == '' }]">
            {{ B404C1.c_name }}<br />
            {{ B404C1.c_grade }}{{ B404C1.c_classroom }}<br />
            {{ B404C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B404C2 != '' }, { tdStyleN: B404C2 == '' }]">
            {{ B404C2.c_name }}<br />
            {{ B404C2.c_grade }}{{ B404C2.c_classroom }}<br />
            {{ B404C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B404C3 != '' }, { tdStyleN: B404C3 == '' }]">
            {{ B404C3.c_name }}<br />
            {{ B404C3.c_grade }}{{ B404C3.c_classroom }}<br />
            {{ B404C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B404C4 != '' }, { tdStyleN: B404C4 == '' }]">
            {{ B404C4.c_name }}<br />
            {{ B404C4.c_grade }}{{ B404C4.c_classroom }}<br />
            {{ B404C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B404C5 != '' }, { tdStyleN: B404C5 == '' }]">
            {{ B404C5.c_name }}<br />
            {{ B404C5.c_grade }}{{ B404C5.c_classroom }}<br />
            {{ B404C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B404C6 != '' }, { tdStyleN: B404C6 == '' }]">
            {{ B404C6.c_name }}<br />
            {{ B404C6.c_grade }}{{ B404C6.c_classroom }}<br />
            {{ B404C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-501
          </td>
          <td :class="[{ tdStyle: B501C1 != '' }, { tdStyleN: B501C1 == '' }]">
            {{ B501C1.c_name }}<br />
            {{ B501C1.c_grade }}{{ B501C1.c_classroom }}<br />
            {{ B501C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B501C2 != '' }, { tdStyleN: B501C2 == '' }]">
            {{ B501C2.c_name }}<br />
            {{ B501C2.c_grade }}{{ B501C2.c_classroom }}<br />
            {{ B501C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B501C3 != '' }, { tdStyleN: B501C3 == '' }]">
            {{ B501C3.c_name }}<br />
            {{ B501C3.c_grade }}{{ B501C3.c_classroom }}<br />
            {{ B501C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B501C4 != '' }, { tdStyleN: B501C4 == '' }]">
            {{ B501C4.c_name }}<br />
            {{ B501C4.c_grade }}{{ B501C4.c_classroom }}<br />
            {{ B501C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B501C5 != '' }, { tdStyleN: B501C5 == '' }]">
            {{ B501C5.c_name }}<br />
            {{ B501C5.c_grade }}{{ B501C5.c_classroom }}<br />
            {{ B501C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B501C6 != '' }, { tdStyleN: B501C6 == '' }]">
            {{ B501C6.c_name }}<br />
            {{ B501C6.c_grade }}{{ B501C6.c_classroom }}<br />
            {{ B501C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-503
          </td>
          <td :class="[{ tdStyle: B503C1 != '' }, { tdStyleN: B503C1 == '' }]">
            {{ B503C1.c_name }}<br />
            {{ B503C1.c_grade }} {{ B503C1.c_classroom }}<br />
            {{ B503C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B503C2 != '' }, { tdStyleN: B503C2 == '' }]">
            {{ B503C2.c_name }}<br />
            {{ B503C2.c_grade }}{{ B503C2.c_classroom }}<br />
            {{ B503C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B503C3 != '' }, { tdStyleN: B503C3 == '' }]">
            {{ B503C3.c_name }}<br />
            {{ B503C3.c_grade }}{{ B503C3.c_classroom }}<br />
            {{ B503C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B503C4 != '' }, { tdStyleN: B503C4 == '' }]">
            {{ B503C4.c_name }}<br />
            {{ B503C4.c_grade }}{{ B503C4.c_classroom }}<br />
            {{ B503C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B503C5 != '' }, { tdStyleN: B503C5 == '' }]">
            {{ B503C5.c_name }}<br />
            {{ B503C5.c_grade }}{{ B503C5.c_classroom }}<br />
            {{ B503C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B503C6 != '' }, { tdStyleN: B503C6 == '' }]">
            {{ B503C6.c_name }}<br />
            {{ B503C6.c_grade }}{{ B503C6.c_classroom }}<br />
            {{ B503C6.c_teacher }}
          </td>
        </tr>

        <tr class="table_C">
          <td
            :id="[
              { RoomId2: this.H1 < 18 && this.H1 > 7 },
              { RoomId: !(this.H1 < 18 && this.H1 > 7) },
            ]"
          >
            B5-504
          </td>
          <td :class="[{ tdStyle: B504C1 != '' }, { tdStyleN: B504C1 == '' }]">
            {{ B504C1.c_name }}<br />
            {{ B504C1.c_grade }}{{ B504C1.c_classroom }}<br />
            {{ B504C1.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B504C2 != '' }, { tdStyleN: B504C2 == '' }]">
            {{ B504C2.c_name }}<br />
            {{ B504C2.c_grade }}{{ B504C2.c_classroom }}<br />
            {{ B504C2.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B504C3 != '' }, { tdStyleN: B504C3 == '' }]">
            {{ B504C3.c_name }}<br />
            {{ B504C3.c_grade }}{{ B504C3.c_classroom }}<br />
            {{ B504C3.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B504C4 != '' }, { tdStyleN: B504C4 == '' }]">
            {{ B504C4.c_name }}<br />
            {{ B504C4.c_grade }}{{ B504C4.c_classroom }}<br />
            {{ B504C4.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B504C5 != '' }, { tdStyleN: B504C5 == '' }]">
            {{ B504C5.c_name }}<br />
            {{ B504C5.c_grade }}{{ B504C5.c_classroom }}<br />
            {{ B504C5.c_teacher }}
          </td>
          <td :class="[{ tdStyle: B504C6 != '' }, { tdStyleN: B504C6 == '' }]">
            {{ B504C6.c_name }}<br />
            {{ B504C6.c_grade }}{{ B504C6.c_classroom }}<br />
            {{ B504C6.c_teacher }}
          </td>
        </tr>
      </table>
    </div>
    <!--表格-->

    <div class="Foot">
      <!--底部-->
      <div
        :class="[
          { 'Foot2-L': this.H1 < 18 && this.H1 > 7 },
          { 'Foot-L': !(this.H1 < 18 && this.H1 > 7) },
        ]"
      >
        <span>实验室负责人:</span>&nbsp;&nbsp;&nbsp;<span class="AdminName">{{
          getAdminCom
        }}</span>

        <span class="AdminName"
          >&nbsp;&nbsp;&nbsp;【&copy;软件创新实验室】</span
        >
      </div>
      <!--Foot2-L-->

      <div
        :class="[
          { 'Foot2-R': this.H1 < 18 && this.H1 > 7 },
          { 'Foot-R': !(this.H1 < 18 && this.H1 > 7) },
        ]"
      >
        <!--Foot2-R-->
        <span>天气 : {{ weather_type }}</span
        >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <span>最{{ weather_low }} -- 最{{ weather_high }}</span>
      </div>
    </div>
  </div>
  <!--Con-->
</template>

<script>
import { axios1, axios2 } from "@/network";
import Qs from "qs";
setInterval(() => {
  console.log(location.reload());
}, 1 * 60 * 60 * 1000); //定时刷新,1个小时
//setInterval(()=>{location.reload()}, 12*1000);//定时刷新,1个小时
export default {
  data() {
    return {
      nowDate: "", //日期
      nowWeek: "", //星期
      nowTime: "", //时间

      B102Time: [], //102有课的时间段
      B102: [],
      B102C1: "", //第一，二节课
      B102C2: "", //第三，四节课
      B102C3: "",
      B102C4: "",
      B102C5: "",
      B102C6: "",

      B203: [],
      B203C1: "", //第一，二节课
      B203C2: "", //第三，四节课
      B203C3: "",
      B203C4: "",
      B203C5: "",
      B203C6: "",

      B301: [],
      B301C1: "", //第一，二节课
      B301C2: "", //第三，四节课
      B301C3: "",
      B301C4: "",
      B301C5: "",
      B301C6: "",

      B304: [],
      B304C1: "", //第一，二节课
      B304C2: "", //第三，四节课
      B304C3: "",
      B304C4: "",
      B304C5: "",
      B304C6: "",

      B401: [],
      B401C1: "", //第一，二节课
      B401C2: "", //第三，四节课
      B401C3: "",
      B401C4: "",
      B401C5: "",
      B401C6: "",

      B403: [],
      B403C1: "", //第一，二节课
      B403C2: "", //第三，四节课
      B403C3: "",
      B403C4: "",
      B403C5: "",
      B403C6: "",

      B404: [],
      B404C1: "", //第一，二节课
      B404C2: "", //第三，四节课
      B404C3: "",
      B404C4: "",
      B404C5: "",
      B404C6: "",

      B501: [],
      B501C1: "", //第一，二节课
      B501C2: "", //第三，四节课
      B501C3: "",
      B501C4: "",
      B501C5: "",
      B501C6: "",

      B503: [],
      B503C1: "", //第一，二节课
      B503C2: "", //第三，四节课
      B503C3: "",
      B503C4: "",
      B503C5: "",
      B503C6: "",

      B504: [],
      B504C1: "", //第一，二节课
      B504C2: "", //第三，四节课
      B504C3: "",
      B504C4: "",
      B504C5: "",
      B504C6: "",

      weather_type: "",
      weather_high: "",
      weather_low: "",

      H1: "", //小时

      Admin: null, //实验室负责人
    };
  },
  methods: {
    changeBut() {
      //却换模式
      this.$router.push("/showcourse2").catch((err) => {});
    },
    getWearther() {
      //获取天气
      axios2({
        url: "https://api.vvhan.com/api/weather",
        method: "get",
        params: {
          city: "广州",
        },
      }).then((res) => {
        //console.log(res.data.info.low)
        this.weather_type = res.data.info.type;
        this.weather_high = res.data.info.high;
        this.weather_low = res.data.info.low;
      });
    },
    getMyTime() {
      //获取时间函数
      var myDate = new Date();
      var year = myDate.getFullYear();
      var month = myDate.getMonth() + 1;
      var day = myDate.getDate();
      this.nowDate = year + "-" + month + "-" + day;
      //console.log(this.nowDate)
      var weekday = myDate.getDay(); //获取星期几
      var weeks = new Array(
        "周日",
        "周一",
        "周二",
        "周三",
        "周四",
        "周五",
        "周六"
      );
      var week = weeks[weekday];
      this.nowWeek = week;

      //获取时间
      var H = myDate.getHours();
      var M = myDate.getMinutes();
      var S = myDate.getSeconds();
      this.H1 = H;
      //console.log((this.H1<18&&this.H>=0))//早上
      //console.log(this.H1)
      //console.log(!(this.H1<18&&this.H1>7))//晚上
      if (H < 10) {
        H = "0" + H;
      }
      if (M < 10) {
        M = "0" + M;
      }
      if (S < 10) {
        S = "0" + S;
      }
      this.nowTime = H + " : " + M + " : " + S;
      //console.log(M)
    }, //时间

    getNowCourse() {
      //获取当天的课程信息
      axios1({
        url: "/course/getTodayCourse",
        method: "get",
        headers: { token: this.$store.state.token },
      })
        .then((res) => {
          console.log(res.data.data);
          this.B102 = res.data.data[0];
          for (let i = 0; i < this.B102.length; i++) {
            //console.log(this.B102[i].c_time)
            if (this.B102[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B102C1 = this.B102[i];
              //console.log(this.B102C1)
            } else if (this.B102[i].c_time.indexOf("10:25:00") != -1) {
              this.B102C2 = this.B102[i];
            } else if (this.B102[i].c_time.indexOf("14:15:00") != -1) {
              this.B102C3 = this.B102[i];
            } else if (this.B102[i].c_time.indexOf("15:55:00") != -1) {
              this.B102C4 = this.B102[i];
            } else if (this.B102[i].c_time.indexOf("18:15:00") != -1) {
              this.B102C5 = this.B102[i];
            } else if (this.B102[i].c_time.indexOf("20:00:00") != -1) {
              this.B102C6 = this.B102[i];
            }

            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断一楼的课程
          // console.log(this.B102Time)、、，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，

          this.B203 = res.data.data[1];
          for (let i = 0; i < this.B203.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B203[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B203C1 = this.B203[i];
              //console.log(this.B102C1)
            } else if (this.B203[i].c_time.indexOf("10:25:00") != -1) {
              this.B203C2 = this.B203[i];
            } else if (this.B203[i].c_time.indexOf("14:15:00") != -1) {
              this.B203C3 = this.B203[i];
            } else if (this.B203[i].c_time.indexOf("15:55:00") != -1) {
              this.B203C4 = this.B203[i];
            } else if (this.B203[i].c_time.indexOf("18:15:00") != -1) {
              this.B203C5 = this.B203[i];
            } else if (this.B203[i].c_time.indexOf("20:00:00") != -1) {
              this.B203C6 = this.B203[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断203楼的课程

          //=================================================================================
          this.B301 = res.data.data[2];
          for (let i = 0; i < this.B301.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B301[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B301C1 = this.B301[i];
              //console.log(this.B102C1)
            } else if (this.B301[i].c_time.indexOf("10:25:00") != -1) {
              this.B301C2 = this.B301[i];
            } else if (this.B301[i].c_time.indexOf("14:15:00") != -1) {
              this.B301C3 = this.B301[i];
            } else if (this.B301[i].c_time.indexOf("15:55:00") != -1) {
              this.B301C4 = this.B301[i];
            } else if (this.B301[i].c_time.indexOf("18:15:00") != -1) {
              this.B301C5 = this.B301[i];
            } else if (this.B301[i].c_time.indexOf("20:00:00") != -1) {
              this.B301C6 = this.B301[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断301楼的课程

          this.B304 = res.data.data[3];
          for (let i = 0; i < this.B304.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B304[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B304C1 = this.B304[i];
              //console.log(this.B102C1)
            } else if (this.B304[i].c_time.indexOf("10:25:00") != -1) {
              this.B304C2 = this.B304[i];
            } else if (this.B304[i].c_time.indexOf("14:15:00") != -1) {
              this.B304C3 = this.B304[i];
            } else if (this.B304[i].c_time.indexOf("15:55:00") != -1) {
              this.B304C4 = this.B304[i];
            } else if (this.B304[i].c_time.indexOf("18:15:00") != -1) {
              this.B304C5 = this.B304[i];
            } else if (this.B304[i].c_time.indexOf("20:00:00") != -1) {
              this.B304C6 = this.B304[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断304楼的课程

          //====================================================================================
          this.B401 = res.data.data[4];
          for (let i = 0; i < this.B401.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B401[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B401C1 = this.B401[i];
              //console.log(this.B102C1)
            } else if (this.B401[i].c_time.indexOf("10:25:00") != -1) {
              this.B401C2 = this.B401[i];
            } else if (this.B401[i].c_time.indexOf("14:15:00") != -1) {
              this.B401C3 = this.B401[i];
            } else if (this.B401[i].c_time.indexOf("15:55:00") != -1) {
              this.B401C4 = this.B401[i];
            } else if (this.B401[i].c_time.indexOf("18:15:00") != -1) {
              this.B401C5 = this.B401[i];
            } else if (this.B401[i].c_time.indexOf("20:00:00") != -1) {
              this.B401C6 = this.B401[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断401楼的课程
          //===============================================================================================

          this.B403 = res.data.data[5];
          for (let i = 0; i < this.B403.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B403[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B403C1 = this.B403[i];
              //console.log(this.B102C1)
            } else if (this.B403[i].c_time.indexOf("10:25:00") != -1) {
              this.B403C2 = this.B403[i];
            } else if (this.B403[i].c_time.indexOf("14:15:00") != -1) {
              this.B403C3 = this.B403[i];
            } else if (this.B403[i].c_time.indexOf("15:55:00") != -1) {
              this.B403C4 = this.B403[i];
            } else if (this.B403[i].c_time.indexOf("18:15:00") != -1) {
              this.B403C5 = this.B403[i];
            } else if (this.B403[i].c_time.indexOf("20:00:00") != -1) {
              this.B403C6 = this.B403[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断401楼的课程
          //===============================================================================================

          this.B404 = res.data.data[6];
          for (let i = 0; i < this.B404.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B404[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B404C1 = this.B404[i];
              //console.log(this.B102C1)
            } else if (this.B404[i].c_time.indexOf("10:25:00") != -1) {
              this.B404C2 = this.B404[i];
            } else if (this.B404[i].c_time.indexOf("14:15:00") != -1) {
              this.B404C3 = this.B404[i];
            } else if (this.B404[i].c_time.indexOf("15:55:00") != -1) {
              this.B404C4 = this.B404[i];
            } else if (this.B404[i].c_time.indexOf("18:15:00") != -1) {
              this.B404C5 = this.B404[i];
            } else if (this.B404[i].c_time.indexOf("20:00:00") != -1) {
              this.B404C6 = this.B404[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断401楼的课程
          //===============================================================================================

          this.B501 = res.data.data[7];
          for (let i = 0; i < this.B501.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B501[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B501C1 = this.B501[i];
              //console.log(this.B102C1)
            } else if (this.B501[i].c_time.indexOf("10:25:00") != -1) {
              this.B501C2 = this.B501[i];
            } else if (this.B501[i].c_time.indexOf("14:15:00") != -1) {
              this.B501C3 = this.B501[i];
            } else if (this.B501[i].c_time.indexOf("15:55:00") != -1) {
              this.B501C4 = this.B501[i];
            } else if (this.B501[i].c_time.indexOf("18:15:00") != -1) {
              this.B501C5 = this.B501[i];
            } else if (this.B501[i].c_time.indexOf("20:00:00") != -1) {
              this.B501C6 = this.B501[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断505楼的课程

          //==============================================================

          this.B503 = res.data.data[8];
          for (let i = 0; i < this.B503.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B503[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B503C1 = this.B503[i];
              //console.log(this.B102C1)
            } else if (this.B503[i].c_time.indexOf("10:25:00") != -1) {
              this.B503C2 = this.B503[i];
            } else if (this.B503[i].c_time.indexOf("14:15:00") != -1) {
              this.B503C3 = this.B503[i];
            } else if (this.B503[i].c_time.indexOf("15:55:00") != -1) {
              this.B503C4 = this.B503[i];
            } else if (this.B503[i].c_time.indexOf("18:15:00") != -1) {
              this.B503C5 = this.B503[i];
            } else if (this.B503[i].c_time.indexOf("20:00:00") != -1) {
              this.B503C6 = this.B503[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断503楼的课程
          //===============================================================================================

          this.B504 = res.data.data[9];
          for (let i = 0; i < this.B504.length; i++) {
            // console.log(this.B203[i].c_time)
            if (this.B504[i].c_time.indexOf("08:40:00") != -1) {
              //console.log(this.B102[i].c_time.indexOf("08:40:00"))
              this.B504C1 = this.B504[i];
              //console.log(this.B102C1)
            } else if (this.B504[i].c_time.indexOf("10:25:00") != -1) {
              this.B504C2 = this.B504[i];
            } else if (this.B504[i].c_time.indexOf("14:15:00") != -1) {
              this.B504C3 = this.B504[i];
            } else if (this.B504[i].c_time.indexOf("15:55:00") != -1) {
              this.B504C4 = this.B504[i];
            } else if (this.B504[i].c_time.indexOf("18:15:00") != -1) {
              this.B504C5 = this.B504[i];
            } else if (this.B504[i].c_time.indexOf("20:00:00") != -1) {
              this.B504C6 = this.B504[i];
            }
            //let subTime=this.B102[i].c_time.substring(0,2)
            //this.B102Time.push(subTime)
          } //for判断504楼的课程
          //======================================================================

          //===============================================================================================

          //========================================================================

          console.log(res);
        })
        .catch((res) => {
          alert(res);
        });
    },

    getAdmin() {
      //获取负责人
      let mydata = new Date();
      let Y = mydata.getFullYear();
      let M = mydata.getMonth() + 1;
      let D = mydata.getDate();
      let nowdate = Y + "-" + M + "-" + D;
      //console.log(nowdate)
      let date = {
        date: nowdate,
      };

      axios1({
        url: "/administrator/getAdministratorByday",
        method: "post",
        data: Qs.stringify(date),
      })
        .then((res) => {
          this.Admin = res.data.data;
          // console.log(this.Adimin)
          //console.log(res)
        })
        .catch((res) => {
          console.log(res);
          console.log("服务端发生错误！！管理员无数据");
        });
    },
  },

  created() {
    setInterval(() => {
      this.getMyTime();
    }, 1000);
    this.getNowCourse(); //获取数据
    this.getWearther(); //获取天气
    this.getAdmin(); //获取实验室负责人
  },

  computed: {
    getAdminCom() {
      if (this.Admin === null) {
        return "无数据";
      } else if (this.H1 > 7 && this.H1 < 12) {
        return this.Admin.morning;
      } else if (this.H1 >= 12 && this.H1 <= 18) {
        return this.Admin.afternoon;
      } else {
        return this.Admin.evening;
      }
    },
  },
};
</script>

<style scoped>
* {
  padding: 0px;
  margin: 0px;
}
div {
  box-sizing: border-box;
}
.Con {
  width: 100%;
  height: 100vh;
  max-height: 1800px;
  margin: auto;
  overflow: hidden;
  /**background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%); */
  font-family: "Anton", sans-serif;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
}
/**=================================================================================================== */
.Con2 {
  width: 100%;
  height: 100vh;
  max-height: 1800px;
  margin: auto;
  overflow: hidden;
  font-family: "Anton", sans-serif;
}
.Con2-H {
  width: 100%;
  height: 10%;
  box-shadow: 1px 1px 10px rgb(109, 109, 109);
  text-align: center;
  background-color: #f3f3f3;
  margin: auto;
  overflow: auto;
}
.Con2-H .P1 {
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #1f1f1f;

  font-size: 24px;
  font-weight: 600;
  padding-top: 20px;
}
.Con2-H .P2 {
  height: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #1f1f1f;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 60px;
}
.Con2-H .P3 {
  letter-spacing: 0.4em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #1f1f1f;
  font-weight: 600;
  margin-top: 20px;
  font-size: 12px;
}
.Con2-C {
  width: 100%;
  height: 85%;

  margin-top: 2px;
  overflow: auto;
}
.Con2-C table {
  width: 100%;
  height: 100%;
}
.table2_header {
  width: 100%;
  height: 5%;
  position: sticky;
  top: 0px;
  background-color: #a7077f;
}
.table2_header td {
  text-align: center;
  color: #fffbfb;
  text-shadow: 0 0 20px #535353, 0 0 20px rgba(114, 114, 114, 0);
  font-size: 17px;
  font-weight: 800;

  width: 14%;
}
.Con2-C .table_C tr {
  height: 9%;
}
.Con2 .table_C td {
  background: rgba(241, 241, 241, 0.7);
  border-radius: 8px;
  text-align: center;
  color: #0e0e0e;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 0 1px #0a0a0a;
  box-shadow: 1px 1px 4px rgb(141, 140, 140);
}
#RoomID2 {
  text-align: center;
  color: #1a1a1a;

  font-size: 20px;
  font-weight: 800;
}
.Foot2-R {
  width: 30%;
  height: 100%;

  color: #1a1919;
  font-size: 12px;
  text-align: right;
  margin-right: 20px;
  padding-top: 10px;
  font-weight: 600;
}
.Foot2-L {
  width: 70%;
  height: 100%;
  color: #0f0f0f;
  text-shadow: 0 0 20px #3a3b3b, 0 0 20px rgba(10, 175, 230, 0);
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  padding-left: 20px;
}
/**============================================================================================================================================================ */
.Con-H {
  width: 100%;
  height: 10%;
  background: rgba(1, 1, 7, 0.1);

  text-align: center;
  border-bottom: #daf6ff 1px solid;
  overflow: auto;
  position: relative;
}

p {
  margin: 0px;
  padding: 0px;
}
.Con-H .P1 {
  height: 20%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  font-size: 24px;

  padding-top: 20px;
}
.Con-H .P2 {
  height: 30%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  letter-spacing: 0.05em;
  font-size: 60px;
}
.Con-H .P3 {
  letter-spacing: 0.4em;
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  margin-top: 20px;
  font-size: 12px;
}
.Con-C {
  width: 100%;
  height: 85%;

  margin-top: 2px;
  overflow: auto;
}

.Con-C table {
  width: 100%;
  height: 100%;
}
.table_header {
  width: 100%;
  height: 5%;
  position: sticky;
  top: 0px;
}
.table_header td {
  text-align: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #abd8e7, 0 0 20px rgba(10, 175, 230, 0);
  font-size: 16px;
  font-weight: 600;
  background: rgba(37, 37, 37, 0.7);
  width: 14%;
}

.Con-C .table_C tr {
  height: 9%;
}
.Con .table_C td {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #1cbff5, 0 0 20px rgba(255, 255, 255, 0);
  font-size: 16px;
  font-weight: 600;
}

#RoomID {
  text-align: center;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  font-size: 18px;
  font-weight: 600;
}

.Foot {
  width: 100%;
  height: 5%;

  display: flex;
}
.Foot-L {
  width: 70%;
  height: 100%;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
  padding-top: 10px;
  font-size: 14px;
  font-weight: 600;
  padding-left: 20px;
}
.Foot-R {
  width: 30%;
  height: 100%;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);

  font-size: 12px;
  text-align: right;
  margin-right: 20px;
  padding-top: 10px;
  font-weight: 600;
}
.AdminName {
  font-size: 17px;
}
.ChangeBut {
  cursor: pointer;
  position: absolute;
  top: 2%;
  left: 2%;
  font-weight: 700;
  font-size: 12px;
  color: #3a3b3b;
}
.ChangeBut2 {
  cursor: pointer;
  position: absolute;
  top: 2%;
  left: 2%;
  font-weight: 700;
  font-size: 14px;
  color: #daf6ff;
  text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
.ChangeBut:hover {
  color: #0ebffa;
}

@media screen and (max-width: 768px) {
  * {
    padding: 0px;
    margin: 0px;
  }
  .Con {
    width: 96%;
    position: fixed;
    margin: auto;
  }
  .Con-H .P1 {
    font-size: 8px;
    padding-top: 5px;
  }
  .Con-H .P2 {
    font-size: 20px;
    letter-spacing: 0.01em;
  }
  .Con-H .P3 {
    font-size: 6px;
    margin-top: 10px;
    letter-spacing: 0.2em;
  }
  .table_header td {
    font-size: 8px;
    font-weight: 600;
    background: rgba(37, 37, 37, 0.9);
  }
  #RoomID {
    font-size: 10px;
  }
  .Con .table_C td {
    font-size: 8px;
  }
  .Foot-R {
    display: none;
  }
  .Foot-L {
    width: 100%;
    font-size: 5px;
    padding-top: 3px;
    text-align: right;
    padding-right: 15px;
  }
  .AdminName {
    font-size: 4px;
  }

  /**========================================================================= */
  .Con2 {
    width: 100%;
    position: fixed;
  }
  .Con2-H .P1 {
    font-size: 8px;
    padding-top: 5px;
  }
  .Con2-H .P2 {
    font-size: 20px;
    letter-spacing: 0.01em;
  }
  .Con2-H .P3 {
    font-size: 6px;
    margin-top: 10px;
    letter-spacing: 0.2em;
  }
  .table2_header td {
    font-size: 8px;
    font-weight: 600;
    background-color: #a7077f;
  }
  #RoomID2 {
    font-size: 10px;
  }
  .Con2 .table_C td {
    font-size: 8px;
  }
  .Foot2-R {
    display: none;
  }
  .Foot2-L {
    width: 100%;
    font-size: 5px;
    padding-top: 3px;
    text-align: right;
    padding-right: 15px;
  }
  .ChangeBut {
    font-size: 5px;
    top: 1%;
    left: 1%;
  }
  .ChangeBut2 {
    font-size: 5px;
    top: 1%;
    left: 1%;
  }
}

/** ========================================================================= */

/** ========================================================================= */

.night {
  position: absolute;
  height: 50%;
  width: 50%;
  transform: rotateZ(139deg);
  margin-top: -200px;

  /** transform: rotateZ(139deg); */
}

.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(
    -45deg,
    #5f91ff,
    rgba(0, 0, 255, 0)
  ); /**  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));*/
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  -webkit-animation: tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
  animation: tail 3000ms ease-in-out infinite,
    shooting 3000ms ease-in-out infinite;
}

.shooting_star::before {
  content: "";
  position: absolute;
  top: calc(50% - 1px * 2);
  right: 0;
  height: 2px;
  background: linear-gradient(
    -45deg,
    rgba(0, 0, 255, 0),
    #5f91ff,
    rgba(0, 0, 255, 0)
  );
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
}

.shooting_star::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px * 2);
  right: 0;
  height: 2px;
  background: linear-gradient(
    -45deg,
    rgba(0, 0, 255, 0),
    #5f91ff,
    rgba(0, 0, 255, 0)
  );
  transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
  animation: shining 3000ms ease-in-out infinite;
  transform: translateX(50%) rotateZ(-45deg);
}

.shooting_star:nth-child(1) {
  top: calc(50% - -4px * 2);
  left: calc(50% - 248px);
  -webkit-animation-delay: 3060ms;
  animation-delay: 3060ms;
}

.shooting_star:nth-child(1)::before,
.shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 3060ms;
  animation-delay: 3060ms;
}

.shooting_star:nth-child(2) {
  top: calc(50% - 180px * 2);
  left: calc(50% - 166px);
  -webkit-animation-delay: 4693ms;
  animation-delay: 4693ms;
}

.shooting_star:nth-child(2)::before,
.shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 4693ms;
  animation-delay: 4693ms;
}

.shooting_star:nth-child(3) {
  top: calc(50% - -88px * 2);
  left: calc(50% - 136px);
  -webkit-animation-delay: 1178ms;
  animation-delay: 1178ms;
}

.shooting_star:nth-child(3)::before,
.shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 1178ms;
  animation-delay: 1178ms;
}

.shooting_star:nth-child(4) {
  top: calc(50% - 92px * 2);
  left: calc(50% - 92px);
  -webkit-animation-delay: 9285ms;
  animation-delay: 9285ms;
}

.shooting_star:nth-child(4)::before,
.shooting_star:nth-child(4)::after {
  -webkit-animation-delay: 9285ms;
  animation-delay: 9285ms;
}

.shooting_star:nth-child(5) {
  top: calc(50% - 89px * 2);
  left: calc(50% - 92px);
  -webkit-animation-delay: 5475ms;
  animation-delay: 5475ms;
}

.shooting_star:nth-child(5)::before,
.shooting_star:nth-child(5)::after {
  -webkit-animation-delay: 5475ms;
  animation-delay: 5475ms;
}

.shooting_star:nth-child(6) {
  top: calc(50% - -164px * 2);
  left: calc(50% - 27px);
  -webkit-animation-delay: 9220ms;
  animation-delay: 9220ms;
}

.shooting_star:nth-child(6)::before,
.shooting_star:nth-child(6)::after {
  -webkit-animation-delay: 9220ms;
  animation-delay: 9220ms;
}

.shooting_star:nth-child(7) {
  top: calc(50% - -136px * 2);
  left: calc(50% - 243px);
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(7)::before,
.shooting_star:nth-child(7)::after {
  -webkit-animation-delay: 7942ms;
  animation-delay: 7942ms;
}

.shooting_star:nth-child(8) {
  top: calc(50% - 174px * 2);
  left: calc(50% - 75px);
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(8)::before,
.shooting_star:nth-child(8)::after {
  -webkit-animation-delay: 8312ms;
  animation-delay: 8312ms;
}

.shooting_star:nth-child(9) {
  top: calc(50% - 138px * 2);
  left: calc(50% - 281px);
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(9)::before,
.shooting_star:nth-child(9)::after {
  -webkit-animation-delay: 6475ms;
  animation-delay: 6475ms;
}

.shooting_star:nth-child(10) {
  top: calc(50% - 25px * 2);
  left: calc(50% - 25px);
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(10)::before,
.shooting_star:nth-child(10)::after {
  -webkit-animation-delay: 7118ms;
  animation-delay: 7118ms;
}

.shooting_star:nth-child(11) {
  top: calc(50% - 184px * 2);
  left: calc(50% - 198px);
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(11)::before,
.shooting_star:nth-child(11)::after {
  -webkit-animation-delay: 8570ms;
  animation-delay: 8570ms;
}

.shooting_star:nth-child(12) {
  top: calc(50% - -194px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(12)::before,
.shooting_star:nth-child(12)::after {
  -webkit-animation-delay: 1026ms;
  animation-delay: 1026ms;
}

.shooting_star:nth-child(13) {
  top: calc(50% - 169px * 2);
  left: calc(50% - 42px);
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(13)::before,
.shooting_star:nth-child(13)::after {
  -webkit-animation-delay: 4957ms;
  animation-delay: 4957ms;
}

.shooting_star:nth-child(14) {
  top: calc(50% - -114px * 2);
  left: calc(50% - 139px);
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(14)::before,
.shooting_star:nth-child(14)::after {
  -webkit-animation-delay: 5748ms;
  animation-delay: 5748ms;
}

.shooting_star:nth-child(15) {
  top: calc(50% - 140px * 2);
  left: calc(50% - 283px);
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(15)::before,
.shooting_star:nth-child(15)::after {
  -webkit-animation-delay: 2809ms;
  animation-delay: 2809ms;
}

.shooting_star:nth-child(16) {
  top: calc(50% - 72px * 2);
  left: calc(50% - 88px);
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(16)::before,
.shooting_star:nth-child(16)::after {
  -webkit-animation-delay: 8661ms;
  animation-delay: 8661ms;
}

.shooting_star:nth-child(17) {
  top: calc(50% - 40px * 2);
  left: calc(50% - 273px);
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(17)::before,
.shooting_star:nth-child(17)::after {
  -webkit-animation-delay: 8037ms;
  animation-delay: 8037ms;
}

.shooting_star:nth-child(18) {
  top: calc(50% - 176px * 2);
  left: calc(50% - 27px);
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(18)::before,
.shooting_star:nth-child(18)::after {
  -webkit-animation-delay: 826ms;
  animation-delay: 826ms;
}

.shooting_star:nth-child(19) {
  top: calc(50% - -164px * 2);
  left: calc(50% - 229px);
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(19)::before,
.shooting_star:nth-child(19)::after {
  -webkit-animation-delay: 1822ms;
  animation-delay: 1822ms;
}

.shooting_star:nth-child(20) {
  top: calc(50% - 85px * 2);
  left: calc(50% - 161px);
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(20)::before,
.shooting_star:nth-child(20)::after {
  -webkit-animation-delay: 5305ms;
  animation-delay: 5305ms;
}

.shooting_star:nth-child(21) {
  top: calc(50% - 100px * 2);
  left: calc(50% - 300px);
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

.shooting_star:nth-child(21)::before,
.shooting_star:nth-child(21)::after {
  -webkit-animation-delay: 4305ms;
  animation-delay: 4305ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }

  30% {
    width: 100px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@keyframes shining {
  0% {
    width: 0;
  }

  50% {
    width: 30px;
  }

  100% {
    width: 0;
  }
}

@-webkit-keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@keyframes shooting {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(300px);
  }
}

@-webkit-keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}

@keyframes sky {
  0% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(405deg);
  }
}
</style>
